<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="com.zzt.system.entity.Module"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>  
<%
	List<Module> oneLevModule = new ArrayList<Module>();
	List<Module> twoLevModule = new ArrayList<Module>();
	if(session.getAttribute("moduleMap") != null){
		Map<String,Object> moduleMap = (Map<String,Object>)session.getAttribute("moduleMap");
		if(moduleMap.containsKey("oneLevModule"))
			oneLevModule = (List<Module>)moduleMap.get("oneLevModule");
		if(moduleMap.containsKey("twoLevModule"))
			twoLevModule = (List<Module>)moduleMap.get("twoLevModule");
	}
	int i = 0;
	String[] className = {"icon-user-md icon-large","icon-book icon-large","icon-book icon-large"};
	String[] classNameTwo = {"icon-user","icon-edit","icon-trash","icon-list","icon-pencil","icon-list-alt","icon-pencil"};
	
%>

<!DOCTYPE HTML>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->

<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->

<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

<!-- BEGIN HEAD -->
	<head>
		<title>Bootstrap菜单</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<!-- Bootstrap -->
		<link href="<%=request.getContextPath()%>/AdminLogin/css/bootstrap.min.css"
			rel="stylesheet">
		<link href="<%=request.getContextPath()%>/AdminLogin/css/font-awesome.min.css"
			rel="stylesheet">
		<script src="<%=request.getContextPath()%>/AdminLogin/js/jquery-1.8.2.min.js"></script>
		<script src="js/jquery-1.8.2.min.js"></script>
		
		<script src="<%=request.getContextPath()%>/AdminLogin/js/bootstrap.min.js"></script>

		<style type="text/css">
body {
	color: #000;
	font-size: 12px;
	font-family: "Helvetica Neue", Helvetica, STheiti, 微软雅黑, 宋体, Arial,
		Tahoma, sans-serif, serif;
}

/*左侧菜单*/
.sidebar-menu {
	border-right: 1px solid #c4c8cb;
}

/*一级菜单*/
.menu-first {
	height: 45px;
	line-height: 45px;
	background-color: #e9e9e9;
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #e1e1e1;
	padding: 0;
	font-size: 14px;
	font-weight: normal;
	text-align: center;
}

/*一级菜单鼠标划过状态*/
.menu-first:hover {
	text-decoration: none;
	background-color: #d6d4d5;
	border-top: 1px solid #b7b7b7;
	border-bottom: 1px solid #acacac;
}

/*二级菜单*/
.menu-second li a {
	background-color: #f6f6f6;
	height: 31px;
	line-height: 31px;
	border-top: 1px solid #efefef;
	border-bottom: 1px solid #efefef;
	font-size: 12px;
	text-align: center;
}

/*二级菜单鼠标划过样式*/
.menu-second li a:hover {
	text-decoration: none;
	background-color: #66c3ec;
	border-top: 1px solid #83ceed;
	border-bottom: 1px solid #83ceed;
	border-right: 3px solid #f8881c;
	border-left: 3px solid #66c3ec;
}

/*二级菜单选中状态*/
.menu-second-selected {
	background-color: #66c3ec;
	height: 31px;
	line-height: 31px;
	border-top: 1px solid #83ceed;
	border-bottom: 1px solid #83ceed;
	border-right: 3px solid #f8881c;
	border-left: 3px solid #66c3ec;
	text-align: center;
}

/*覆盖bootstrap的样式*/
.nav-list,.nav-list li a {
	padding: 0px;
	margin: 0px;
}
</style>
	</head>
	<body style="margin: 0; padding: 0; background-color: #F6F6F6;">
		<!--Sidebar content-->
		<div class="sidebar-menu" style="margin: 0; padding: 0;">
			<c:forEach items="<%=oneLevModule %>" var="one">
				<a href="#articleMenu<%=i %>" class="nav-header menu-first collapsed"
					data-toggle="collapse"><i class="<%=className[new Random().nextInt(className.length)] %>"></i>
					${ one.developerMenu }</a>
				<ul id="articleMenu<%=i %>" class="nav nav-list collapse menu-second">
					<c:forEach items="<%=twoLevModule %>" var="two">
						<c:if test="${ two.parent.id == one.id }">
							<li>
								<a href="javascript:void(0)" onclick="loadingPage('${ two.className }','${ two.developerMenu }','${ two.id }')"><i
									class="<%=classNameTwo[new Random().nextInt(classNameTwo.length)] %>"></i> ${ two.developerMenu }</a>
							</li>
						</c:if>
					</c:forEach>
				</ul>
				<% i++; %>
			</c:forEach>
		</div>
		<script type="text/javascript">
			$("#").click( function() {
				$('#myDiv').enableContextMenu();
				$(this).attr('disabled', true);
				$("#disableMenus").attr('disabled', false);
			});

			/* 点击菜单，加载Tab页面 */
			function loadingPage(url, menuName, menuId){
				//if(url == "#")
				//	return false;
				/* 1、引用nav页面 */
				var rightFrame = self.parent.frames["nav"].document;
				//var childHtml = $(rightFrame).contents().find("#loadFrame");
				//childHtml.attr("src",url);
				
				/* 阻止点击菜单，创建一个以上同样的Tab */
				if($(rightFrame).contents().find("#"+menuId+"").attr('class') != undefined){
					toggleTab(rightFrame,menuId);
					return false;
				}

				var browserHeight = $(self.parent.frames["nav"]).height();
				
				var myTab = $(rightFrame).contents().find("#myTab");
				var myTabContent = $(rightFrame).contents().find("#myTabContent");
				myTab.append("<li class='' id='li"+menuId+"'><a href='#"+menuId+"' data-toggle='tab'>"+menuName+"</a></li>");
				myTabContent.append("<div class='tab-pane fade' id='"+menuId+"'><iframe id='' src='"+url+"' style='height:"+browserHeight+"px;width: 100%;border: 0px;'></iframe></div>");
				toggleTab(rightFrame,menuId);

				/* 为新建的Tab，增加右键菜单 */
				self.parent.frames["nav"].buildMenu(menuId);
			}

			/* 切换Tab，选中当前Tab，其他Tab改为不选中 */
			function toggleTab(navPage,menuId){
				var allTab = $(navPage).contents().find("#myTab > li");
				for(var i = 0; i < allTab.length; i++){
					if($(allTab[i]).attr("id") == "li"+menuId)
						$(allTab[i]).attr('class','active');
					else
						$(allTab[i]).attr('class','');
				}
				
				var allTabContent = $(navPage).contents().find("#myTabContent > div");
				for(var j = 0; j < allTabContent.length; j++){
					if($(allTabContent[j]).attr("id") == menuId)
						$(allTabContent[j]).attr('class','tab-pane fade active in');
					else
						$(allTabContent[j]).attr('class','tab-pane fade');
				}
			}

		</script>
	</body>
</html>
